<div class="invite-user-modal-banners">
    <div id="invite-success-banner-container" class="banner-wrapper"></div>
    {{#if (not user_has_email_set) }}
    <div class="demo-organization-add-email-banner banner-wrapper"></div>
    {{/if}}
    {{#if development_environment}}
    <div id="dev-env-email-access-banner-container" class="banner-wrapper"></div>
    {{/if}}
    <div class="invite-setup-tips-container banner-wrapper"></div>
</div>
<form id="invite-user-form">
    <div class="input-group">
        <div id="invite_users_option_tabs_container"></div>
        <div id="invitee_emails_container">
            <label for="invitee_emails" class="modal-field-label">{{t "Emails (one on each line or comma-separated)" }}
                {{> help_link_widget link="/help/invite-new-users#send-email-invitations" }}
            </label>
            <div class="pill-container {{#unless user_has_email_set}}not-editable-by-user{{/unless}}">
                <div class="input" {{#if user_has_email_set}}contenteditable="true"{{/if}}></div>
            </div>
        </div>
    </div>
    <div class="input-group" id="receive-invite-acceptance-notification-container">
        <label class="checkbox display-block">
            <input type="checkbox" id="receive-invite-acceptance-notification" checked/>
            <span class="rendered-checkbox"></span>
            {{t "Send me a direct message when my invitation is accepted" }}
        </label>
    </div>
    <div class="input-group">
        <label for="expires_in" class="modal-field-label">{{t "Invitation expires after" }}</label>
        <select id="expires_in" name="expires_in" class="invite-user-select modal_select bootstrap-focus-style">
            {{#each expires_in_options}}
                <option {{#if this.default }}selected{{/if}} value="{{this.value}}">{{this.description}}</option>
            {{/each}}
        </select>
        <p class="time-input-formatted-description"></p>
        <div id="custom-invite-expiration-time" class="dependent-settings-block custom-time-input-container">
            <label class="modal-field-label">{{t "Custom time" }}</label>
            <input id="custom-expiration-time-input" name="custom-expiration-time-input" class="custom-time-input-value inline-block" type="text" autocomplete="off" value="" maxlength="3"/>
            <select id="custom-expiration-time-unit" name="custom-expiration-time-unit" class="custom-time-input-unit invite-user-select modal_select bootstrap-focus-style">
                {{#each time_choices}}
                    <option value="{{this.name}}">{{this.description}}</option>
                {{/each}}
            </select>
            <p class="custom-time-input-formatted-description"></p>
        </div>
    </div>
    <div class="input-group">
        <label for="invite_as" class="modal-field-label">{{t "Users join as" }}
            {{> help_link_widget link="/help/user-roles" }}
        </label>
        <select id="invite_as" name="invite_as" class="invite-user-select modal_select bootstrap-focus-style">
            <option value="{{ invite_as_options.guest.code }}">{{t "Guests" }}</option>
            <option selected="selected" value="{{ invite_as_options.member.code }}">{{t "Members" }}</option>
            {{#if is_admin}}
            <option value="{{ invite_as_options.moderator.code }}">{{t "Moderators" }}</option>
            <option value="{{ invite_as_options.admin.code }}">{{t "Administrators" }}</option>
            {{/if}}
            {{#if is_owner}}
            <option value="{{ invite_as_options.owner.code }}">{{t "Owners" }}</option>
            {{/if}}
        </select>
    </div>
    <div class="input-group">
        <label>{{t "Channels they should join" }}</label>
        <div id="streams_to_add">
            {{#if show_select_default_streams_option}}
            <div class="select_default_streams">
                <label class="checkbox display-block modal-field-label">
                    <input type="checkbox" id="invite_select_default_streams" checked="checked" />
                    <span class="rendered-checkbox"></span>
                    {{t 'Default channels for this organization'}}
                </label>
            </div>
            {{/if}}
            <div id="invite_streams_container" class="add_streams_container">
                <div class="pill-container stream_picker">
                    <div class="input" contenteditable="true"
                      data-placeholder="{{t 'Add channels' }}">
                        {{~! Squash whitespace so that placeholder is displayed when empty. ~}}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="guest_visible_users_container" class="input-group" style="display: none;">
        {{> guest_visible_users_message}}
    </div>
    {{#if show_group_pill_container}}
        <div class="input-group">
            <label class="modal-field-label">{{t "User groups they should join" }} {{> help_link_widget link="/help/user-groups"}}</label>
            <div id="user-groups-to-add">
                <div id="invite-user-group-container" class="add-user-group-container">
                    <div class="pill-container">
                        <div class="input" contenteditable="true"
                          data-placeholder="{{t 'Add user groups' }}">
                            {{~! Squash whitespace so that placeholder is displayed when empty. ~}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {{/if}}
    {{#if is_admin}}
    <div class="input-group">
        {{#if default_welcome_message_custom_text.length}}
        <label class="checkbox display-block modal-field-label">
            <input type="checkbox" id="send_default_realm_welcome_message_custom_text" checked="checked"/>
            <span class="rendered-checkbox"></span>
            {{t 'Send the default Welcome Bot message configured for this organization'}}
        </label>
        {{else}}
        <label class="checkbox display-block modal-field-label">
            <input type="checkbox" id="send_custom_welcome_message_custom_text"/>
            <span class="rendered-checkbox"></span>
            {{t 'Send a custom Welcome Bot message'}}
        </label>
        {{/if}}
        <div id="invite_welcome_message_custom_text_container">
            <label for="invite_welcome_custom_message_text" class="modal-field-label">{{t "Message text" }}</label>
            <textarea id="invite_welcome_custom_message_text" name="invite_welcome_message_custom_text" class="modal-textarea" maxlength="8000" rows="3">
                {{~default_welcome_message_custom_text~}}
            </textarea>
        </div>
    </div>
    {{/if}}
</form>
